<template>
  <div class="register">
    <div class="register-content" v-if="!success">
      <div class="register-header">新用户注册</div>
      <div class="register-body">
        <router-view @success="handleSuccess" />
      </div>
    </div>
    <Success :code="code" v-else />
  </div>
</template>

<script>
import Success from './Success'
export default {
  name: 'Register',
  components: { Success },
  data() {
    return {
      success: false,
      code: ''
    }
  },
  methods: {
    handleSuccess(code) {
      this.success = true
      this.code = code
    }
  }
}
</script>

<style lang="scss">
@import 'styles/common.scss';
.register {
  height: 100%;
  overflow: auto;
  .register-content {
    margin: 0.89rem auto;
    width: 10.28rem;
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;
    text-align: center;
    .register-header {
      height: 0.97rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f1f4ff;
      border-bottom: 1px solid $colorPrimary;
      color: $colorPrimary;
      font-size: 0.32rem;
    }
    .register-body {
      padding: 0.5rem 2rem 0.4rem;
      .register-btn {
        width: 100%;
      }
    }
  }
}
</style>
